<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 900px;
            height: auto;
            display: grid;
            grid: auto-flow minmax(300px, max-content) / repeat(3, 300px);
            column-gap: 5px;
            row-gap: 20px;
            margin: 0 auto;
        }

        .box>div {
            display: grid;
            place-items: center;
            place-content: center;
            background: #000;
        }

        .box>div>span {
            color: #fff;
            min-height: 30px;
            text-align: center;
            margin-top: 10px;
        }

        .box>div>img {
            background: #aaa;
        }

        .basic {
            width: 200px;
            height: 200px;

        }

        .fixed-width {
            width: 200px;
            height: auto;
        }

        .fixed-height {
            height: 200px;
            width: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>
            <span>不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</span>
            <img class="basic" src="./image/big.jpg" alt="" srcset="" style="object-fit: fill" />
        </div>
        <div>
            <span>保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来</span>
            <img class="basic" src="./image/big.jpg" alt="" srcset="" style="object-fit: contain" />
        </div>
        <div>
            <span>保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取</span>
            <img class="basic" src="./image/big.jpg" alt="" srcset="" style="object-fit: cover" />
        </div>
        <div>
            <span>宽度不变，高度自动变化，保持原图宽高比不变</span>
            <img class="fixed-width" src="./image/tall.jpg" alt="" srcset="" />
        </div>
        <div style="grid-column: 2 / span 2;">
            <span>高度不变，宽度自动变化，保持原图宽高比不变</span>
            <img class="fixed-height" src="./image/big.jpg" alt="" srcset="" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的顶部区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: center top;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的底部区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: center bottom;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的中间区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: center center;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的左边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: left center ;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的右边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: right center;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的左上边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: left top;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的右上边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: right top;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的左下边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: left bottom;object-fit: none;" />
        </div>
        <div>
            <span>不缩放图片，只显示图片的右下边区域</span>
            <img class="basic" src="./image/tall.jpg" alt="" srcset=""
                style="object-position: right bottom;object-fit: none;" />
        </div>
    </div>
</body>
<script>
    let requset, minLevel = 100, maxLevel = 0, objectArray = [], load = { datas: [] }, continuity = false
    document.getElementsByClassName("api-title").forEach((item) => {
        if (item.innerText === "响应参数") requset = item.nextSibling.getElementsByClassName("ant-table-row");
    });
    // 找到最大level
    requset.forEach((item) => {
        if (item.className.split("").at(-1) > maxLevel) maxLevel = item.className.split("").at(-1)
        if (item.className.split("").at(-1) < minLevel) minLevel = item.className.split("").at(-1)
        objectArray.push({
            class: item.className.split("").at(-1),
            key: item.children[0].innerText,
            title: item.children[1].innerText,
            type: item.children[2].innerText,
        })
    })

    while (minLevel <= maxLevel) {
        console.log(minLevel, maxLevel, minLevel <= maxLevel)
        for (let i = objectArray.length - 1; i >= 0; i--) {
            // console.log(item.class, maxLevel, item.class != maxLevel)
            const item = objectArray[i]
            if (item.class != maxLevel) continuity = false
            if (item.class === maxLevel) {
                if (load.datas.length == 0) load.end = i
                continuity = true
                load.datas.push(item)
            }
            if (load?.datas.length > 0 && !continuity) {
                load.start = i + 1
                item.children = load.datas
                console.log(load)
                console.log(objectArray.splice(load.start, load.end))
                load = { datas: [] }
            }
        }
        maxLevel--
    }

    console.log(objectArray)


</script>

</html>